@import url('../common/common.less');

@doctorAn: .5s ease-in-out forwards;
@doctorHandAn: 1s ease-in-out infinite;

.fake_all_box{
    width: 100%;
    height: 100%;
    background: url('./../../image/home_bg.jpg') no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    .fake_tilte{
        width: 100%;
        position: absolute;
        top: 55px;
    }
    .fake_tilte img{
        display: block;
        width: 628px;
        margin: 0 auto;
    }
    .fake_ctn_box{
        position: relative;
        top: 300px;
        left: 0px;
        width: 100%;
        height: 1px;
        .fake_doctor{
            width: 488px;
            height: 528px;
        }
        .fake_doctor img:nth-child(1){
            position: absolute;
            z-index: 3;
        }
        .fake_doctor1{
            position: absolute;
            top: 10px;
            // left: -80px;
            left: -480px;
            animation: doctorMove1 @doctorAn;
        }
        .fake_doctor2{
            position: absolute;
            top: 10px;
            // right: -100px;
            right: -400px;
            animation: doctorMove2 @doctorAn;
        }
        .fake_doctor3{
            position: absolute;
            top: 503px;
            // left: -50px;
            left: -450px;
            animation: doctorMove3 @doctorAn;
        }
        .fake_doctor4{
            position: absolute;
            top: 533px;
            // right: -100px;
            right: -500px;
            animation: doctorMove4 @doctorAn;
        }
        .fake_doctor_hand1{
            position: absolute;
            top: 230px;
            left: 250px;
            width: 207px;
            height: 173px;
            animation: handRotate @doctorHandAn;
            transform-origin: left;
        }
        .fake_doctor_hand2{
            position: absolute;
            top: 260px;
            right: 100px;
            width: 227px;
            height: 205px;
            animation: handRotate @doctorHandAn;
            transform-origin: top;
            z-index: 3;
        }
        .fake_doctor_hand3{
            position: absolute;
            top: 210px;
            left: 250px;
            width: 159px;
            height: 177px;
            animation: handRotate @doctorHandAn;
            transform-origin: left;
        }
        .fake_doctor_hand4{
            position: absolute;
            top: 216px;
            right: 338px;
            width: 97px;
            height: 150px;
            animation: handRotate @doctorHandAn;
            transform-origin: top;
        }
        .fake_doctor img:nth-child(1) {
            width: 100%;
        }
    }
    .fake_talk_text{
        position:absolute;
        bottom: 100px;
        width: 100%;
        z-index: 4;
        display: none;
    }
    .fake_talk_text img {
        display: block;
        width: 532px;
        height: 74px;
        margin: 0 auto;
    }
}
@keyframes doctorMove1 {
    100%{
        left: -13%
    }
}
@keyframes doctorMove2 {
    100%{
        right: -13%
    }
}
@keyframes doctorMove3 {
    100%{
        left: -7%
    }
}
@keyframes doctorMove4 {
    100%{
        right: -16%
    }
}
// @keyframes doctorMove1 {
//     100%{
//         left: -100px
//     }
// }
// @keyframes doctorMove2 {
//     100%{
//         right: -100px
//     }
// }
// @keyframes doctorMove3 {
//     100%{
//         left: -50px;
//     }
// }
// @keyframes doctorMove4 {
//     100%{
//         right: -120px;
//     }
// }


@keyframes handRotate {
    25%{
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}